.button-variant(@color, @background, @border){
    color:@color;
    background-color:@background;
    border-color:@border;
    &:focus,
    &.focus{
        color:@color;
        background-color:darken(@background, 6%);
        border-color:@border;
    }
    &:hover{
        color:@color;
        background-color:darken(@background, 10%);
        border-color:darken(@border, 12%);
    }
    &:active,
    &.active{
        color:@color;
        background-color:darken(@background, 10%);
        border-color:@border;
        background-image:none;
    }

    &.disabled,
    &[disabled]{
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active{
            background-color:@background;
            border-color:@border;
        }
        &.w-btn-default,&.w-btn-default:hover{
            opacity: 1;
            color:lighten(@gray-base, 75%);
            background-color: lighten(@gray-base, 95%);
        }

    }
}
.button-loading(@size,@bg-color,@bg-color-inverse){
    &.w-btn-loading&:before {
        width: @size;
        height: @size;
        border:solid @bg-color-inverse 1px;
        border-radius: @size;
        border-top-color: @bg-color;
        border-left-color: @bg-color;
        // border-right-color: @bg-color;
    }
}
.button-size-loading(@top,@size){
    &.w-btn-loading&:before {
        position: relative;
        top: @top;
        width: @size;
        height: @size;
        margin-right: 2px;
    }
    
}
// Button sizes
.button-size(@padding-vertical, @padding-horizontal, @font-size, @line-height, @border-radius){
    padding:@padding-vertical @padding-horizontal;
    font-size:@font-size;
    line-height:@line-height;
    border-radius:@border-radius;
}
// WebKit-style focus
.tab-focus(){
    // Default
    // outline:thin dotted;
    // // WebKit
    // outline:5px auto -webkit-focus-ring-color;
    // outline-offset:-2px;
    // outline: 0;
}